<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <link href="https://fonts.googlefonts.cn/css?family=Montserrat" rel="stylesheet">
    <!-- <link rel="stylesheet" href="./iconfont/iconfont.css"> -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
        integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <div class="box">
        <div class="inputBox">
            <input type="password" id="pswrd" placeholder="请输入密码" onkeyup="checkPassword(this.value)">
            <span id="toggleBtn"></span>
        </div>
        <div class="checkInputBox">
            <input type="password" id="pswrd" placeholder="请确认密码" onkeyup="recheckPassword(this.value)">
            <span id="toggleBtn"></span>
        </div>
        <div class="validation">
            <ul>
                <li id="lower">至少包含一位小写字母</li>
                <li id="upper">至少包含一位大写字母</li>
                <li id="number">至少包含一位数字</li>
                <li id="special">至少包含一位特殊字符</li>
                <li id="length">至少长度为8</li>
                <li id="recheck">两次输入的密码一致</li>
            </ul>
        </div>
    </div>


    <script>

        //控制密码框内容是否可见
        let pswrds = document.querySelectorAll('#pswrd');
        let toggleBtns = document.querySelectorAll('#toggleBtn');

        // 获取表单验证
        let lowerCase = document.querySelector('#lower');
        let upperCase = document.querySelector('#upper');
        let numberCase = document.querySelector('#number');
        let specialCase = document.querySelector('#special');
        let lengthCase = document.querySelector('#length');
        let recheckCase = document.querySelector('#recheck');
        let pwd;


        for (let i = 0; i < toggleBtns.length; i++) {
            toggleBtns[i].addEventListener('click', function () {
                if (pswrds[i].type === 'password') {
                    pswrds[i].setAttribute('type', 'text'); // 修改type属性为text 使密码可见
                    toggleBtns[i].classList.add('hide');
                } else {
                    pswrds[i].setAttribute('type', 'password');
                    toggleBtns[i].classList.remove('hide');
                }
            });
        }


        // 正则验证
        function checkPassword(data) {
            //传参
            // console.log(data);
            pwd = data;


            // .*是指任何字符0个或多个 ？表示非贪婪模式，即为匹配最近字符 

            const lower = new RegExp('(?=.*[a-z])');
            const upper = new RegExp('(?=.*[A-Z])');
            const number = new RegExp('(?=.*[0-9])');
            const special = new RegExp('(?=.*[!@#\$%\^&\*])');
            const length = new RegExp('(?=.{8,})');

            // 小写判断
            if (lower.test(data)) {
                lowerCase.classList.add('valid');
            } else {
                lowerCase.classList.remove('valid');
            }
            //大写
            if (upper.test(data)) {
                upperCase.classList.add('valid');
            } else {
                upperCase.classList.remove('valid');
            }

            //数字
            if (number.test(data)) {
                numberCase.classList.add('valid');
            } else {
                numberCase.classList.remove('valid');
            }

            //特殊字符
            if (special.test(data)) {
                specialCase.classList.add('valid');
            } else {
                specialCase.classList.remove('valid');
            }

            // 长度
            if (length.test(data)) {
                lengthCase.classList.add('valid');
            } else {
                lengthCase.classList.remove('valid');
            }

        }

        // 校验两次密码输入
        function recheckPassword(data) {
            // 校验两次密码是否一致  存在漏洞
            // 首先判空
        

            if (data === ''||pwd ==='') {
                recheckCase.classList.remove('valid');
            }
            else if (pwd === data) {
                recheckCase.classList.add('valid');
            } else {
                recheckCase.classList.remove('valid');
            }


        }


    </script>
</body>

</html>